<template>
  <header>
    <div class="header-wrapper">
      <div class="header-left">
        {{$t('login.systemName')}}
      </div>
      <div class="menu-list">
        <div class="menu-item"
             v-for="(item, index) in menuList"
             :key="index"
             @click="openMenu(item.url)">
          <span :class="item.url == activeName? 'menu-item-active':''">{{ $t(`header.${item.url}`) }}</span>
        </div>
      </div>
      <div class="header-right">
        <div class="account-box">
          <span class="account-name">
            {{shopName}}
          </span>
          <span class="account-layout"
                @click="loginOut">
            <!--退出账号-->
            {{ $t('header.loginOut') }}
          </span>
        </div>
        <div class="lang-box">
          <!-- <span class="lang" :class="$i18n.locale=='de'?'lang-active':''" @click="changeLanguage('de')">
          {{ $t('header.german') }}
        </span>
          <span class="lang v-line">
          |
        </span>
          <span class="lang" :class="$i18n.locale=='zh-CN'?'lang-active':''" @click="changeLanguage('zh-CN')">
          {{ $t('header.chinese') }}
        </span> -->
          <!-- :placeholder="$t('header.enter')"> -->
          <template>
            <el-select v-model="value"
                       :placeholder="$t('header.enter')">

              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </template>

        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',

  data () {
    return {
      menuList: [
        {
          url: 'MenuManage'
        },
        {
          url: 'OrderManage'
        },
        {
          url: 'ReportManage'
        },
        // {
        //   url: 'AccountManage'
        // },
        {
          url: 'OtherSetting'
        }
      ],
      shopName: sessionStorage.getItem('shopName'),
      activeName: '', // 选中的菜单栏

      // 语言
      options: [{
        value: 'zh-CN',
        label: '中国'
      },
      {
        value: 'de',
        label: '德国'
      },

      {
        value: 'en',
        label: '英国'
      },

      {
        value: 'it',
        label: '意大利'
      },
      {
        value: 'da',
        label: '丹麦'
      },

      {
        value: 'fr',
        label: '法语'
      },
      {
        value: 'nl',
        label: '荷兰语'
      },
      {
        value: 'pt',
        label: '葡萄牙'
      },
      {
        value: 'sv-SE',
        label: '瑞典'
      },
      {
        value: 'es',
        label: '西班牙'
      },],

      value: ''
    }
  },


  props: {},

  components: {},

  mounted () {
    this.activeName = this.$route.path.split('/')[2]
  },

  watch: {
    value: function (onlvalue, newval) {
      // if (onlvalue === this.$i18n.locale) return
      this.$i18n.locale = onlvalue
    }
  },

  computed: {},

  filters: {},

  methods: {
    // 路由跳转
    openMenu (url) {
      this.$router.push(url)
      this.activeName = url
    },

    // 退出账号
    loginOut () {
      sessionStorage.removeItem('shopId')
      this.$router.push('/Login')
    },

    // 切换语言
    changeLanguage (lang) {
      if (lang === this.$i18n.locale) return
      this.$i18n.locale = lang
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  .header-wrapper {
    height: 80px;
    @include fja();
    background: #0b2038;
    box-shadow: 3px 0 10px 0 rgba(0, 0, 0, 0.1);
    .header-left {
      flex: 0 0 230px;
      padding: 0 15px;
      line-height: 80px;
      font-family: PingFang-SC-Semibold;
      font-weight: bold;
      font-size: 24px;
      color: $fc;
      letter-spacing: 0;
      text-align: center;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .menu-list {
      flex: 1;
      height: 60px;
      line-height: 60px;
      margin: 10px 0;
      font-family: PingFang-SC-Regular;
      font-size: 18px;
      color: $fc;
      letter-spacing: 0;
      @include fja();
      .menu-item {
        flex: 1;
        padding: 0 10px;
        text-align: center;
        cursor: pointer;
        span {
          display: block;
          &.menu-item-active {
            background: #ff8214;
            border-radius: 10px;
            font-weight: bold;
          }
        }
      }
    }
    .header-right {
      text-align: right;
      flex: 0 0 350px;
      padding: 0 20px 0 10px;
      @include fja(flex-start);
      .account-box {
        padding: 0 10px;
        flex: 1;
        @include fja();
        .account-name {
          cursor: pointer;
          flex: 1;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          color: $fc;
          letter-spacing: 0;
          text-align: center;
          @include elli();
        }
        .account-layout {
          flex: 0 0 80px;
          cursor: pointer;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          color: #2ad8ff;
          letter-spacing: 0;
          text-align: center;
        }
      }
      .lang-box {
        padding: 0 10px;
        min-width: 100px;
        text-align: center;
        @include fja(flex-end);
        .lang {
          cursor: pointer;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          color: $fc;
          letter-spacing: 0;
          text-align: center;
          &.lang-active {
            color: #2ad8ff;
          }
        }
        .v-line {
          padding: 0 10px;
        }
      }
    }
  }
}

.lang-box /deep/ .el-select {
  width: 120px;
}
.menu-list .menu-item:nth-child(3){
  display: none;
}
</style>
